<template>
  <div id='analyze-rule'>
    <div id="title-content">
      <!-- <span id="title-text">{{`${$route.query.type==='0'?'脆弱性':'攻击类'}告警自动分析规则配置`}}</span> -->
      <span id="title-text">自动分析规则设置</span>
    </div>
    <div v-if="$route.query.type==='0'">
      <div v-for="(item, key) in ruleConfigs.fragile" :key='key' class="analyze-rule-content">
        <div class="analyze-rule-title">{{item.name}}</div>
        <div v-show="item.tunit" class="analyze-rule-item">
          <span>时间跨度</span>
          <at-input v-model="item.tvalue" @blur="verify(item.tvalue, item, 'time')" class="inp"></at-input>
          <span :class="{ errorHint: item.terrorhint, rightHint: !item.terrorhint}">格式错误</span>
          <at-select v-model="item.tunit" placeholder="时间单位" @change='selectChange(item)' style="margin-right:10px">
            <at-option
              v-for="item in times"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </at-option>
          </at-select>
        </div>
        <div v-show="item.roperator" class="analyze-rule-item">
          <span>风险等级</span>
          <at-select v-model="item.roperator" placeholder="比较运算符" @change='selectChange(item)'>
            <at-option
              v-for="item in operators"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </at-option>
          </at-select>
          <at-select v-model="item.rlevel" placeholder="请选择等级" @change='selectChange(item)' style="margin-right:10px">
            <at-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </at-option>
          </at-select>
        </div>
        <div v-show="item.woperator" class="analyze-rule-item">
          <span>影响网站占比</span>
          <at-select v-model="item.woperator" placeholder="比较运算符" @change='selectChange(item)'>
            <at-option
              v-for="item in operators"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </at-option>
          </at-select>
          <at-input v-model="item.wvalue" @blur="verify(item.wvalue, item, 'num')" class="inp"></at-input>
          <!-- <span style="margin-right:10px">%</span> -->
          <span :class="{ errorHint: item.werrorhint, rightHint: !item.werrorhint}" :key="key">格式错误</span>
        </div>
        <div v-show="item.keyword" class="analyze-rule-item">
          <span>{{item.keywordtype}}</span>:
          <span>{{item.keyword}}</span>
        </div>
      </div>
      <div class="custom-rule-container">
        <div class="analyze-rule-title">自定义规则</div>
        <div class="custom-rule-item">
          <span>规则名称</span>
          <at-input v-model="customRule.name" style="min-width: 800px;" placeholder="请输入规则名称"></at-input>
        </div>
        <div class="custom-rule-item">
          <span style="margin-left: 12px;">关键字</span>
          <at-select v-model="customRule.keywordtype" style="width:150px;margin-right: 5px;"  placeholder="请选择关键字类型">
            <at-option
              v-for="item in fragileKeywords"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </at-option>
          </at-select>
          <at-input v-model="customRule.keyword" style="min-width: 640px;" placeholder="请输入关键字"></at-input>
          <i class="saas-icon-ten" @click="addRule"></i>
        </div>
      </div> 
    </div> 
    <div v-else-if="$route.query.type==='1'">
      <div v-for="(item, key) in ruleConfigs.attack" :key='key' class="analyze-rule-content">
        <div v-if="item.rtype === '1'" class="delRule"><i class="saas-icon-del" @click="delRule(item.id)" ></i></div>
        <div class="analyze-rule-title">{{item.name}}</div>
        <div v-show="item.tunit" class="analyze-rule-item">
          <span>时间跨度</span>
          <at-input v-model="item.tvalue" @blur="verify(item.tvalue, item, 'time')" class="inp"></at-input>
          <span :class="{ errorHint: item.terrorhint, rightHint: !item.terrorhint}" style="margin-left:57px">格式错误</span>
          <at-select v-model="item.tunit" placeholder="时间单位" style="margin-right:10px" @change='selectChange(item)'>
            <at-option
              v-for="item in times"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </at-option>
          </at-select>
        </div>
        <div v-show="item.roperator" class="analyze-rule-item">
          <span>风险等级</span>
          <at-select v-model="item.roperator" placeholder="比较运算符" @change='selectChange(item)'>
            <at-option
              v-for="item in operators"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </at-option>
          </at-select>
          <at-select v-model="item.rlevel" placeholder="请选择等级" style="margin-right:10px" @change='selectChange(item)'>
            <at-option
              v-for="item in levels"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </at-option>
          </at-select>
        </div>
        <div v-show="item.foperator" class="analyze-rule-item">
          <span>反复出现次数</span>
          <at-select v-model="item.foperator" placeholder="比较运算符" @change='selectChange(item)'>
            <at-option
              v-for="item in operators"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </at-option>
          </at-select>
          <at-input v-model="item.fvalue" @blur="verify(item.fvalue, item, 'num')" class="inp"></at-input>
          <!-- <span style="margin-right:10px">%</span> -->
          <span :class="{ errorHint: item.ferrorhint, rightHint: !item.ferrorhint}" :key="key">格式错误</span>
        </div>
        <div v-show="item.keyword" class="analyze-rule-item">
          <span>关键字：</span>
          <span>{{item.keyword}}</span>
        </div>
        <div v-show="item.behavior" class="analyze-rule-item">
          <span>行为名称：</span>
          <span>{{item.behavior}}</span>
        </div>
        <div v-show="item.type" class="analyze-rule-item">
          <span>类型名称：</span>
          <span>{{item.type}}</span>
        </div>
      </div>
      <div class="custom-rule-container">
        <div class="analyze-rule-title">自定义规则</div>
        <div class="custom-rule-item">
          <span>规则名称</span>
          <at-input v-model="customRule.name"  placeholder="请输入规则名称"></at-input>
        </div>
        <div class="custom-rule-item">
          <span>关键字</span>
          <!-- <at-select v-model="customRule.keywordtype" style="width:150px;margin-right: 5px;" placeholder="请选择关键字类型">
            <at-option
              v-for="item in attackKeywords"
              :key="item.label"
              :label="item.label"
              :value="item.label">
            </at-option>
          </at-select> -->
          <at-input v-model="customRule.keyword" style="min-width: 640px;" placeholder="请输入关键字"></at-input>
          <i class="saas-icon-ten" @click="addRule"></i>
        </div>
      </div> 
    </div>
    <div class="rule-control-content">
      <at-button type="primary" @click="ruleSave">保存</at-button>
      <!-- ruleSave -->
      <at-button @click="ruleCancel" style="margin-left: 14px;" >取消</at-button>
    </div>
    <at-dialog title="提示" :visible.sync="dialogRuleSave" size="small">
      <span>历史分析结果是否重新分析？</span>
      <div slot="footer" class="dialog-footer">
        <at-button type="primary" @click="confirmRuleSave('again')">重新分析</at-button>
        <at-button @click="confirmRuleSave('')">仅保存</at-button>
      </div>
    </at-dialog>
  </div>
</template>
<script>
import $http from '../../../utils/http.js'
import { Notification } from 'atelement'
import { createNamespacedHelpers } from 'vuex'
const { mapGetters, mapActions } = createNamespacedHelpers('analyze')
export default {
  name: 'AnalyzeRule',
  props: {
    closetabs: { type: Function }
  },
  created () {
    this.getAutoRules()
  },
  data () {
    return {
      dialogRuleSave: false,
      errorHint: false,
      // rules: [
      //   {
      //     name: '全局新兴规则配置', time: { num: 1, unit: '天' }, risklevel: { num: 1, operator: '>' }, website: { num: 20, operator: '<' }
      //   },
      //   {
      //     name: '局部新兴规则配置', time: { num: 1, unit: '周' }, risklevel: { num: 2, operator: '=' }
      //   },
      //   {
      //     name: '全局流行规则配置', time: { num: 1, unit: '年' }, risklevel: { num: 3, operator: '<' }
      //   },
      //   {
      //     name: '高危规则配置', risklevel: { num: 3, operator: '<' }
      //   },
      //   {
      //     name: '反复出现规则配置', risklevel: { num: 2, operator: '=' }, num: { operator: '=', num: 4 }
      //   },
      //   {
      //     name: '长期未处置规则配置', time: { num: 1, unit: '天' }, risklevel: { num: 2, operator: '=' }
      //   }
      // ],
      times: [{
        value: 'd',
        label: '天'
      }, {
        value: 'w',
        label: '周'
      }, {
        value: 'm',
        label: '月'
      }, {
        value: 'y',
        label: '年'
      }],
      operators: [{
        value: '>',
        label: '大于'
      }, {
        value: '=',
        label: '等于'
      }, {
        value: '<',
        label: '小于'
      }],
      levels: [{
        value: '1',
        label: '1级'
      }, {
        value: '2',
        label: '2级'
      }, {
        value: '3',
        label: '3级'
      }, {
        value: '4',
        label: '4级'
      }, {
        value: '5',
        label: '5级'
      }],
      fragileKeywords: [{
        label: 'CVE编号'
      }, {
        label: '漏洞名称'
      }],
      attackKeywords: [{
        label: 'ip'
      }, {
        label: 'url'
      }, {
        label: '域名'
      }, {
        label: '服务类型'
      }, {
        label: '邮箱'
      }],
      customRule: {
        name: '',
        // keywordtype: '',
        keyword: '',
        rsource: ''
      }
    }
  },
  computed: {
    ...mapGetters([
      'ruleConfigs',
      'ruleConfigsCopy'
    ])
  },
  methods: {
    ...mapActions({
      getAutoRules: 'GET_AUTO_RULES',
      addCustomRule: 'ADD_CUSTOM_RULE',
      saveRules: 'SAVE_RULES'
    }),
    verify (val, data, type) {
      let reg = /^[0-9]*$/
      console.log(val)
      if (typeof (val) === 'string') {
        let r = val.match(reg)
        if (r === null) {
          if (type === 'time') {
            data.terrorhint = true
          } else if (type === 'num') {
            data.ferrorhint = true
          }
        } else if (val === '') {
          if (type === 'time') {
            data.terrorhint = true
          } else if (type === 'num') {
            data.ferrorhint = true
          }
        } else {
          if (type === 'time') {
            data.terrorhint = false
          } else if (type === 'num') {
            data.ferrorhint = false
          }
        }
        for (let i of this.ruleConfigsCopy.attack.values()) {
          if (i.id === data.id) {
            if ((i[type[0] + 'value'] + '') === val) {
              data.change = false
            } else {
              data.change = true
            }
          }
        }
      }
    },
    addRule () {
      if (this.$route.query.type === '0') {
        this.customRule.rsource = 1
      } else {
        this.customRule.rsource = 2
      }
      this.addCustomRule(this.customRule)
      setTimeout(() => {
        this.customRule = {
          name: '',
          // keywordtype: '',
          keyword: '',
          rsource: ''
        }
      }, 500)
    },
    ruleSave () {
      this.dialogRuleSave = true
    },
    confirmRuleSave (again) {
      this.saveRules({
        'configs': this.ruleConfigs,
        'again': again
      })
      let nowRoute = this.$route.fullPath
      this.$router.push({ path: '/monitor/analyze' })
      setTimeout(() => {
        this.closetabs(nowRoute, 'remove')
      }, 500)
    },
    ruleCancel () {
      let nowRoute = this.$route.fullPath
      this.$router.push({ path: '/monitor/analyze' })
      setTimeout(() => {
        this.closetabs(nowRoute, 'remove')
      }, 500)
    },
    selectChange (item) {
      item.change = true
    },
    delRule (ruleId) {
      $http.post('/api/analyze/autoAnalyze/delRule', { ruleId: ruleId }).then(({ status, msg, data } = {}) => {
        if (status === 'success') {
          Notification.success('删除成功')
          this.getAutoRules()
        } else if (status === 'fail') {
          Notification.warning(msg)
        }
      })
    }
  }
}
</script>
<style lang='less'>
#analyze-rule{
  background-color:#ffffff;
  margin-bottom: 50px;
  #title-content{
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    color: #5c6781;
    font-weight: 700;
    padding:0 20px;
    border-bottom:1px solid #eeeeee;
  }
  .analyze-rule-content{
    margin: 20px 20px 0;
    border:1px solid #eeeeee;
    .delRule {
      font-size:20px;
      cursor:pointer;
      color:#1f92ef;
      float: right;
      line-height: 40px;
      margin-right: 20px;
    }
    .analyze-rule-title{
      height: 40px;
      line-height:40px;
      border-bottom:1px solid #eeeeee;
      padding:0 20px;
      font-size: 12px;
      color: #5c6781;
      font-weight: 700;
    }
    .analyze-rule-item{
      display: inline-block;
      min-width: 500px;
      min-height: 50px;
      padding: 20px 40px;
    }
    .inp{
      width: 120px;;
    }
    .errorHint{
      // color: red;
      color: red;
      position: absolute;
      margin: 0px 85px;
      display: block;
    }
    .rightHint{
      display: none;
    }
  }
  .custom-rule-container{
    margin: 20px 20px 0;
    border:1px solid #eeeeee;
    .analyze-rule-title{
      height: 40px;
      line-height:40px;
      border-bottom:1px solid #eeeeee;
      padding:0 20px;
      font-size: 12px;
      color: #5c6781;
      font-weight: 700;
    }
    .custom-rule-item{
      width: 100%;
      height: 50px;
      line-height: 50px;
      padding-left: 85px;
    }
  }
  .rule-control-content{
    width: 100%;
    height: 70px;
    padding: 20px 0;
    text-align: center;
  }
  
}
</style>
